<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转木马</title>
	<link rel="stylesheet" type="text/css" href="./css/reset.css">
	<link rel="stylesheet" type="text/css" href="./css/index.css">
	<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="./js/index.js" defer></script>
</head>
<body>
	<div class="J_poster poster-main" data-settings='{
														"width":1000,
														"height":270,
														"posterWidth":640,
														"posterHeight":270,
														"scale":0.9,
														"speed":500,
														"autoplay":true,
														"delay":2000,
														"verticalAlign":"middle"
	}'>
		<div class="poster-btn poster-prev-btn">&lsaquo;</div>
		<ul class="poster-list">
			<li class="poster-item"><a href="#"><img src="./images/1.jpg" alt="hello" width="100%"></a></li>
			<li class="poster-item"><a href="#"><img src="./images/2.jpg" alt="hello" width="100%"></a></li>
			<li class="poster-item"><a href="#"><img src="./images/3.jpg" alt="hello" width="100%"></a></li>
			<li class="poster-item"><a href="#"><img src="./images/4.jpg" alt="hello" width="100%"></a></li>
			<li class="poster-item"><a href="#"><img src="./images/5.jpg" alt="hello" width="100%"></a></li>
		</ul>
		<div class="poster-btn poster-next-btn">&rsaquo;</div>
	</div>

	<div class="J_poster poster-main" data-settings='{
														"width":800,
														"height":270,
														"posterWidth":640,
														"posterHeight":270,
														"scale":0.9,
														"speed":500,
														"autoplay":true,
														"delay":2600,
														"verticalAlign":"bottom"
	}'>
		<div class="poster-btn poster-prev-btn">&lsaquo;</div>
		<ul class="poster-list">
			<li class="poster-item"><a href="#"><img src="./images/1.jpg" alt="hello" width="100%"></a></li>
			<li class="poster-item"><a href="#"><img src="./images/2.jpg" alt="hello" width="100%"></a></li>
			<li class="poster-item"><a href="#"><img src="./images/3.jpg" alt="hello" width="100%"></a></li>
			<li class="poster-item"><a href="#"><img src="./images/4.jpg" alt="hello" width="100%"></a></li>
		</ul>
		<div class="poster-btn poster-next-btn">&rsaquo;</div>
	</div>






	<script type="text/javascript">
		$(function(){
			//初始化多个组件
			Carousel.init($(".J_poster"))
		})
	</script>
</body>
</html>